<template>
	<u-popup :show="visible" bgColor="transparent">
		<view class="container-recharge">
			<view class="popup-title">
				充值
				<image class="icon-close" src="/static/icon_close_white.png" @tap="onClose"></image>
			</view>
			<view class="wrap-title">充值金额</view>
			<view class="wrap-money">
				<view v-for="(item,idx) in moneyOptions" :key="idx"
					:class="['item-money',rechargeIndex==idx?'selected':'']" @tap="onSelectRecharge(idx)">
					<text class="unit">&yen;</text>{{item}}
				</view>
			</view>
			<view :class="['wrap-input-money',rechargeMoney?'filled':'']">
				<text class="unit-yuan">&yen;</text><input class="txt-money" type="digit" v-model="rechargeMoney"
					placeholder-style="color:rgba(255,255,255,0.07);" placeholder="请输入自定义金额" @input="onInputRecharge" />
			</view>
			<view class="wrap-tip-rechare">
				<view class="title">充值说明</view>
				<view class="tip-item">1.提供3次免费对话额度，之后继续使用需充值。</view>
				<view class="tip-item">2.根据实际使用情况支付费用，0.1元/次。</view>
				<view class="tip-item">3.若遇到充值未到账，请联系客户（微信：26762685）</view>
			</view>
			<view :class="['btn-pay',rechargeMoney?'':'disabled']" @tap="onPay">立即支付</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from "vue"
	import {
		showToast
	} from "@/utils/frameApi.js"
	import {
		inputDecimalData
	} from "@/utils/index.js"

	import {
		useUser
	} from "@/hooks/useUser.js"
	import {
		lockRecharge,
		payComplete
	} from "@/http/apis/rechargeAPI.js"
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
	})
	const emits = defineEmits(['update:visible', 'refreshAmount'])
	let userInfo = ref({})
	const userStore = useUser();
	userStore.getUserInfo().then(res => {
		Object.assign(userInfo.value, res?.public_user_info || {})

	}, err => {

	})
	const moneyOptions = ref([
		1, 3, 6
	]);
	const rechargeIndex = ref(-1)
	const rechargeMoney = ref("");
	const onClose = () => {
		emits('update:visible', false)
	}
	const onSelectRecharge = (idx) => {
		rechargeIndex.value = idx;
		rechargeMoney.value = moneyOptions.value[idx]
	}
	const onInputRecharge = () => {
		let val = rechargeMoney.value;
		val = inputDecimalData(val, 2);
		if (val > 1000) {
			val = 1000
		}
		rechargeIndex.value = -1;
		nextTick(() => {
			rechargeMoney.value = val;
		})
	}
	// 提交数据
	let requesting = false;
	const onPay = async () => {
		if (rechargeMoney.value <= 0) {
			showToast({
				title: '请输入有效金额'
			})
			return;
		}
		if (requesting) {
			return;
		}
		requesting = true;
		let resLock = await lockRecharge({
			invoke_method: "lock_price_before_pay",
			id_public_user_info: userInfo.value.id_public_user_info,
			pre_cmd_para_pay_type: 1211,
			mid_table_remark_001: rechargeMoney.value,
			mid_table_remark_002: '充值', //rechargeMoney.value,
			mid_table_remark_013: rechargeMoney.value,
			mid_table_remark_004: 1003,
			mid_table_remark_029: 2111,
			mid_table_remark_041: 1003
		}).catch((err) => {
			console.log(err, '>>>lockRecharge...error')
			requesting = false;
		})
		if (resLock) {
			payComplete({
				invoke_method: "pay_method_all_in_one",
				pre_cmd_para_pay_lock_code: resLock.pre_cmd_para_pay_lock_code,
			}).then(res => {
				emits('refreshAmount')
				emits('update:visible', false)
			}, err => {
				console.log(err, '>>>resPayComplete...error')
				requesting = false;
			})



		}
	}
</script>

<style lang="less">
	.container-recharge {
		position: relative;
		width: 100%;
		padding: 40rpx 32rpx;
		background: #213343;
		border-radius: 48rpx 48rpx 0px 0px;
		box-sizing: border-box;

		.popup-title {
			position: relative;
			width: 100%;
			text-align: center;

			line-height: 34rpx;
			font-size: 34rpx;
			// font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;

			.icon-close {
				position: absolute;
				width: 28rpx;
				height: 28rpx;
				right: 7rpx;
				top: 50%;
				transform: translate(0, -50%);
				-webkit-transform: translate(0, -50%);
			}
		}

		.wrap-title {
			position: relative;
			width: 100%;
			padding-left: 18rpx;
			line-height: 32rpx;
			font-size: 32rpx;
			// font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			box-sizing: border-box;
			margin-top: 40rpx;
			margin-bottom: 40rpx;

			&::before {
				position: absolute;
				content: ' ';
				width: 8rpx;
				height: 28rpx;
				background: #00FFF6;
				border-radius: 4rpx;
				top: 4rpx;
				left: 0;
			}
		}

		.wrap-money {
			position: relative;
			width: 100%;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;

			// font-family: customfont;
			.item-money {
				position: relative;
				width: 210rpx;
				height: 128rpx;
				background: #2D4052;
				border: 2rpx solid #455461;
				border-radius: 32rpx;
				box-sizing: border-box;
				text-align: center;
				line-height: 128rpx;
				box-sizing: border-box;
				font-size: 64rpx;
				// font-family: customfont;

				font-weight: bold;
				color: #FFFFFF;

				.unit {
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					
					padding-right: 10rpx;
				}

				&.selected {
					background: #00FFF6;
					border: 2rpx solid #FFFFFF;
					color: #213343;
					.unit{
						color: #213343;
					}
				}


			}
		}

		.wrap-input-money {
			position: relative;
			width: 100%;
			height: 128rpx;
			background: #182836;
			border: 2rpx solid #455461;
			border-radius: 32rpx;
			line-height: 128rpx;
			padding-right: 40rpx;
			padding-left: 40rpx;
			box-sizing: border-box;
			margin-bottom: 64rpx;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			align-items: center;

			// font-family: customfont;
			&.filled {
				border: 2rpx solid #48C282;
			}

			.unit-yuan {
				position: relative;
				line-height: 68rpx;
				font-size: 68rpx;
				// font-family: PingFang SC;
				font-weight: 600;
				// color: #48C282;
				color: #00FFF6;
				margin-right: 22rpx;
				// margin-top: -3rpx;
				box-sizing: border-box;
				vertical-align: top;
			}

			.txt-money {
				position: relative;
				flex: 1;
				line-height: 48rpx;
				font-size: 48rpx;
				// font-family: customfont;
				font-weight: 600;
				color: #FFFFFF;

			}
		}

		.wrap-tip-rechare {
			position: relative;
			width: 100%;
			line-height: 28rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: rgba(255, 255, 255, 0.6);

			.title {
				margin-bottom: 30rpx;
			}

			.tip-item {
				position: relative;
				width: 100%;
				line-height: 24rpx;
				font-size: 24rpx;
				// font-family: PingFang SC;
				font-weight: 400;
				// color: #FFFFFF;
				// opacity: 0.6;
				margin-bottom: 19rpx;
			}
		}

		.btn-pay {
			position: relative;
			width: 100%;
			height: 120rpx;
			// background: linear-gradient(0deg, #10A383 0%, #48C282 100%);
			background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
			border-radius: 60rpx;
			line-height: 120rpx;
			text-align: center;

			font-size: 36rpx;
			// font-family: PingFang SC;
			font-weight: 600;
			// color: #FFFFFF;
			color: #213343;
			box-sizing: border-box;
			margin-top: 69rpx;

			&.disabled {
				opacity: 0.6;
			}
		}
	}
</style>